<template>
  <div class='app-container'>
    <object-view
      v-for='object in deviceInfo'
      :key='object.objectName'
      :obj='object'
      class="object-view-format"
    >
    </object-view>
  </div>
</template>

<script>
import ObjectView from './ObjectView'

export default {
  name: 'DeviceDetail',

  components: {
    ObjectView
  },

  data() {
    return {
      deviceInfo: null
    }
  },

  created() {
    this.id = this.$route.query.id
    this.deviceInfo = this.fetchDeviceInfo()
  },

  methods: {
    fetchDeviceInfo() {
      return [
        {
          objectName: 'server',
          resources: [
            {
              item: 'id',
              ops: 'R',
              value: this.id
            },
            {
              item: 'name',
              ops: 'RW',
              value: 'test-name'
            },
            {
              item: 'state',
              ops: 'RE',
              value: 'running'
            },
            {
              item: 'regTime',
              ops: 'R',
              value: '2020-02-29 12:35:59'
            },
            {
              item: 'upTime',
              ops: 'R',
              value: '2020-03-31 16:20:20'
            },
            {
              item: 'lifetime',
              ops: 'R',
              value: 300
            }
          ]
        },
        {
          objectName: 'location',
          resources: [
            {
              item: 'latitude',
              ops: 'RW',
              value: 32.7514
            },
            {
              item: 'longitude',
              ops: 'RW',
              value: 120.1708
            },
            {
              item: 'description',
              ops: 'RW',
              value: 'Hanniko home - 301'
            }
          ]
        },
        {
          objectName: 'meter',
          resources: [
            {
              item: 'record',
              ops: 'R',
              value: 10.3
            },
            {
              item: 'unit',
              ops: 'RE',
              value: 'ton'
            },
            {
              item: 'lastReadTime',
              ops: 'R',
              value: '2020-03-31 16:20:30'
            }
          ]
        }
      ]
    }
  }
}
</script>

<style lang='scss'>
.object-view-format {
  &:not(:last-child) {
    margin-bottom: 15px;
  }
}
</style>
